<template>
  <Header></Header>
  <div class="main">
    <RouterView/>
  </div>
  <Footer></Footer>
</template>

<script setup>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import { useSettingStore } from '@/stores/useSetting'
import { baseURL } from './config/baseURL';
import { onMounted } from 'vue';

const settingStore = useSettingStore()
settingStore.getSetting()

onMounted(() => {
    //将网站图标和标题设置到浏览器标签上
    document.title = settingStore.current.logo_name

    // 删除rel为icon的link标签，解决link一直增加导致favicon不能即时刷新的问题
    document.head.querySelectorAll("link").forEach(link => {
        if (link.rel === 'icon') {
            link.parentNode?.removeChild(link);
        }
    })
    // 修改浏览器页签图标
    const link = document.createElement('link');
    link.rel = "icon";
    link.href = baseURL + settingStore.current.logo

    document.head.append(link);
})
</script>

<style>
.main{
  width: 1200px;
  margin: auto;
}

/* 美化滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 10px;
}
</style>
